<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户签收</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            display: block;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #999;
        }

        .action {
            display: flex;
            padding: 35px 20px;
        }

        .reset {
            flex: 1;
        }

        .btn {
            background-color: #1ab394;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div class="action">
        <div class="reset">
            <span id="reset" class="btn">清空</span>
        </div>
        <div class="agree">
            <span id="agree" class="btn">确定</span>
        </div>
    </div>
    <input id="order_no" type='hidden' value="{$order_no}">
</body>
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/peity/jquery.peity.min.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/iCheck/icheck.min.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jedit.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jquery.jeditable.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/blob.js"></script>
<script>
    function Draw(obj, setting) {
        this.obj = obj;
        this.type = setting.type || "stroke";
        this.color = setting.color || "#000";
        this.width = setting.width || "1";
    }
    Draw.prototype = {
        init: function () {
            this.obj.strokeStyle = this.color;
            this.obj.fillStyle = this.color;
            this.obj.lineWidth = this.width;
        },
        pen: function (x, y, x1, y1) {
            this.init();
            this.obj.save();
            this.obj.lineCap = "round";
            this.obj.lineTo(x1, y1);
            this.obj.stroke();
            this.obj.restore();
        },
        cut: function (x, y, x1, y1) {
            this.init();
            this.obj.clearRect(x, y, x1, y1)
        }
    }
    var vw = document.documentElement.clientWidth
    var vh = document.documentElement.clientHeight
    var canvas = document.getElementById("canvas");
    var reset = document.getElementById('reset');
    var agree = document.getElementById('agree');
    canvas.width = vw - 2
    canvas.height = vh - 100
    var obj = canvas.getContext("2d");
    var color = "#000";
    var linewidth = "1";
    var style = "stroke";
    var x, y, w, h;
    canvas.addEventListener('touchstart', function (e) {
        e.preventDefault();
        x = e.touches[0].clientX;
        y = e.touches[0].clientY;
        obj.beginPath();
        obj.moveTo(x, y);
    })
    var draw = new Draw(obj, { type: style, color: color, width: linewidth });//实例化构造函数
    canvas.addEventListener('touchmove', function (e) {
        e.preventDefault();
        w = e.touches[0].clientX;
        h = e.touches[0].clientY;
        draw.pen(x, y, w, h);
    })
    var order_no = $('#order_no').val();
    reset.onclick = function () {
        draw.cut(0, 0, canvas.width, canvas.height);
    }
    agree.onclick = function () {
        layer.load(2, {
            shade: [0.8,'#fff'] //0.8透明度的白色背景
        });
        var formData = new FormData();
        canvas.toBlob(function (blob) {
            formData.append("file", blob, "avatar.png");
            $.ajax({
                type: "post",
                url: "{:url('admin/upload/upimg')}",
                data: formData,
                dataType: "json",
                cache: false,
                contentType: false,
                processData: false,
                success: function (res) {
                    if(res.code>0){
                        $.ajax({
                            type:'post',
                            data:'addr='+res.data+'&order_no='+order_no,
                            url:"{:url('draw')}",
                            success:function(e){
                                console.log(obj)
                                if(e.code>0){
                                    layer.msg(e.msg,'',function(){
                                        location.href="{:url('index')}";
                                    });
                                }else{
                                    layer.msg(e.msg);
                                }
                            }
                        })
                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
        }, 'image/png')
    }
    $(window).resize(function () {
        var vw = document.documentElement.clientWidth
        var vh = document.documentElement.clientHeight
        canvas.width = vw - 2
        canvas.height = vh - 100
    })

</script>

</html>